<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:jsp="http://java.sun.com/jsf/composite" xml:lang="en"
                lang="en"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:a="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
        >

<rich:popupPanel id="registerPanel" width="540" height="580" modal="true">
    <f:facet name="header"><h:outputText value="#{i18n.signup}"/></f:facet>
    <f:facet name="controls">

            <h:graphicImage value="/resources/img/close.gif" styleClass="hidelink" id="hideRegisterlink" onclick="#{rich:component('registerPanel')}.hide(); return false;"/>
               <!-- <rich:componentControl for="registerPanel" attachTo="hidelink" operation="hide" event="onclick"/>-->

    </f:facet>
    <h:form id="registerForm">
        <h:panelGrid columns="1" footerClass="regFooter">
            <h:panelGrid columns="2" columnClasses="col0,col1" cellpadding="5">
                <h:panelGroup>
                    <h:outputText value="#{i18n.login_username}"/><h:graphicImage value="/resources/img/rqd.gif"/>
                </h:panelGroup>
                <h:panelGroup>
                    <h:inputText label="#{i18n.login_username}" id="userName" required="true"
                                 value="#{guest.registrationScreenName}" size="12" maxlength="16">
                        <rich:graphValidator/>
                       <!-- <a:ajax event="onblur" reRender="userName" ajaxSingle="true"/>-->
                    </h:inputText>
                    <rich:message for="userName">
                        <f:facet name="errorMarker"><h:graphicImage value="/resources/img/error.gif"/></f:facet>
                    </rich:message>
                </h:panelGroup>
                <h:panelGroup>
                    <h:outputText value="#{i18n.login_password}"/><h:graphicImage value="/resources/img/rqd.gif"/>
                </h:panelGroup>
                <h:panelGroup>
                    <h:inputSecret label="#{i18n.login_password}" id="password" required="true"
                                   value="#{guest.passwordSupport.password}" size="12" maxlength="12">
                        <rich:graphValidator/>
                    </h:inputSecret>
                    <rich:message for="password">
                        <f:facet name="errorMarker"><h:graphicImage value="/resources//resources/img/error.gif"/></f:facet>
                    </rich:message>
                </h:panelGroup>
                <h:panelGroup>
                    <h:outputText value="#{i18n.login_password_confirm}"/><h:graphicImage value="/resources//resources/img/rqd.gif"/>
                </h:panelGroup>
                <h:panelGroup>
                    <h:inputSecret label="#{i18n.login_password_confirm}" id="passwordConfirm"
                                   value="#{guest.passwordSupport.passwordConfirm}" required="true" size="12"
                                   maxlength="12"/>
                </h:panelGroup>
                <h:panelGroup>
                    <h:outputText value="#{i18n.login_email}"/><h:graphicImage value="/resources//resources/img/rqd.gif"/>
                </h:panelGroup>
                <h:panelGroup>
                    <h:inputText label="#{i18n.login_email}" id="email" required="true" value="#{guest.user.email}"
                                 size="22" maxlength="60">
                        <rich:graphValidator/>
                    </h:inputText>
                    <!--&nbsp;-->
                    <h:graphicImage id="emailTipImg" value="/resources//resources/img/help.gif"/>
                    <rich:message for="email">
                        <f:facet name="errorMarker"><h:graphicImage value="/resources//resources/img/error.gif"/></f:facet>
                    </rich:message>
                </h:panelGroup>
                <h:panelGroup>
                    <h:outputText value="#{i18n.firstName}"/><h:graphicImage value="/resources//resources/img/rqd.gif"/>
                </h:panelGroup>
                <h:panelGroup>
                    <h:inputText label="#{i18n.firstName}" id="firstName" required="true"
                                 value="#{guest.user.firstName}" size="17" maxlength="30">
                        <f:validateLength minimum="1" maximum="30"/>
                        <rich:graphValidator/>
                    </h:inputText>
                    <rich:message for="firstName">
                        <f:facet name="errorMarker"><h:graphicImage value="/resources//resources/img/error.gif"/></f:facet>
                    </rich:message>
                </h:panelGroup>
                <h:panelGroup>
                    <h:outputText value="#{i18n.lastName}"/><h:graphicImage value="/resources/img/rqd.gif"/>
                </h:panelGroup>
                <h:panelGroup>
                    <h:inputText label="#{i18n.lastName}" id="lastName" required="true" value="#{guest.user.lastName}"
                                 size="17" maxlength="30">
                        <f:validateLength minimum="1" maximum="30"/>
                        <rich:graphValidator/>
                    </h:inputText>
                    <rich:message for="lastName">
                        <f:facet name="errorMarker"><h:graphicImage value="/resources/img/error.gif"/></f:facet>
                    </rich:message>
                </h:panelGroup>
            </h:panelGrid>

            <f:facet name="footer">

                    <h:selectBooleanCheckbox id="agreedToTerms" value="#{guest.agreedToTermsOfUse}"/><h:outputText
                        value="#{i18n.agree_to_terms}" escape="false"/><h:outputLink value="#"
                                                                                     id="termsOfUseLink"><h:outputText
                        value="#{i18n.terms_of_use}"/><rich:componentControl for="termsOfUse" attachTo="termsOfUseLink"
                                                                             operation="show"
                                                                             event="onclick"/></h:outputLink><br/>

                    <a:commandButton id="registerButton" value="#{i18n.register}" action="#{guest.doRegister}"
                                     styleClass="rich-fileupload-button" reRender="regPending"
                                     oncomplete="if (document.getElementById('jsfMsgMaxSev').value != '2') { #{rich:component('registerPanel')}.hide(); #{rich:component('regPending')}.show(); }"/>


            </f:facet>
        </h:panelGrid>
        <rich:message for="registerButton">
            <f:facet name="errorMarker"><h:graphicImage value="/resources/img/error.gif"/></f:facet>
        </rich:message>
    </h:form>
    <rich:tooltip id="emailTip" attached="true" for="emailTipImg"><h:outputText
            value="#{i18n.email_tip}"/></rich:tooltip>
    <rich:tooltip id="captchaTip" attached="true" for="captchaTipHelp"><h:outputText
            value="#{i18n.captcha_tip}"/></rich:tooltip>
</rich:popupPanel>

<rich:popupPanel id="loginPanel" width="320" height="240">
    <f:facet name="header"><h:outputText value="#{i18n.login}"/></f:facet>
    <f:facet name="controls">
        <h:graphicImage value="/resources//resources/img/close.gif" styleClass="hidelink" id="hideLoginlink" onclick="#{rich:component('loginPanel')}.hide(); return false;"/>
          <!--  <rich:componentControl for="loginPanel" attachTo="hideLoginLink" operation="hide" event="onclick"/>-->

    </f:facet>
    <h:form id="loginForm" prependId="false">
        <h:panelGrid columns="2" columnClasses="col0,col1" cellpadding="5" footerClass="authFooter">
            <h:outputText value="#{i18n.login_username}"/>
            <h:inputText id="j_username" value="#{guest.loginUserId}"/>
            <h:outputText value="#{i18n.login_password}"/>
            <h:inputSecret id="j_password"/>
            <h:outputText value=" "/>
            <h:panelGroup>
                <h:selectBooleanCheckbox id="_spring_security_remember_me"/>
                <h:outputText value="#{i18n.remember_me}"/>
            </h:panelGroup>
            <f:facet name="footer">
                <h:panelGroup><h:commandButton type="submit" id="loginBtn" action="#{guest.doLogin}"
                                               value="#{i18n.login}" styleClass="rich-fileupload-button"/>
                    <rich:message for="loginBtn"><f:facet name="errorMarker"><h:graphicImage
                            value="/resources/img/forbidden.gif"/></f:facet></rich:message></h:panelGroup>
            </f:facet>
        </h:panelGrid><br/><br/><h:outputLink value="#" id="forgotLink"><h:outputText
            value="#{i18n.login_forgot_password}"/>
        <rich:componentControl for="forgotPanel" attachTo="forgotLink"
                               operation="show"
                               event="onclick"/></h:outputLink>
    </h:form>
</rich:popupPanel>

<rich:popupPanel id="forgotPanel" width="360" height="240">
    <f:facet name="header"><h:outputText value="#{i18n.login_forgot_password}"/></f:facet>
    <f:facet name="controls">

            <h:graphicImage value="/resources/img/close.gif" styleClass="hidelink" id="hideForgotLink"/>
            <rich:componentControl for="forgotPanel" attachTo="hideForgotLink" operation="hide" event="onclick"/>

    </f:facet>
    <h:form id="forgotForm" prependId="false">
        <h:panelGrid columns="2" columnClasses="col0,col1" cellpadding="5" headerClass="authHeader"
                     footerClass="authFooter">
            <f:facet name="header"><h:outputText value="#{i18n.forgot_form_desc}"/></f:facet>
            <h:outputText value="#{i18n.login_username}"/>
            <h:inputText label="#{i18n.login_username}" id="lostPasswordUserId" value="#{guest.lostPasswordUserId}"/>
            <h:outputText value="#{i18n.login_email}"/>
            <h:inputText label="#{i18n.login_email}" id="lostPasswordEmail" value="#{guest.lostPasswordEmail}"/>
            <f:facet name="footer">
                <a:commandButton type="submit" id="resetLostPassword" action="#{guest.doRecoverLostPassword}"
                                 value="#{i18n.reset_password}" styleClass="rich-fileupload-button"
                                 reRender="pswdRecovered"
                                 oncomplete="if (document.getElementById('jsfMsgMaxSev').value != '2') { #{rich:component('forgotPanel')}.hide(); #{rich:component('pswdRecovered')}.show(); }"/>
            </f:facet>
        </h:panelGrid>
        <rich:message for="resetLostPassword"><f:facet name="errorMarker"><h:graphicImage
                value="/resources/img/error.gif"/></f:facet></rich:message>
    </h:form>
</rich:popupPanel>

<rich:popupPanel id="regPending" width="360" height="260">
    <f:facet name="header"><h:outputText value="#{i18n.reg_pending_title}"/></f:facet>
    <f:facet name="controls">

            <h:graphicImage value="/resources/img/close.gif" styleClass="hidelink" id="hidePendingLink"/>
            <rich:componentControl for="regPending" attachTo="hidePendingLink" operation="hide" event="onclick"/>

    </f:facet>
    <h:outputFormat value="#{i18n.reg_pending}" escape="false">
        <f:param value="#{guest.newUserName}"/>
        <f:param value="#{guest.newUserEmail}"/>
    </h:outputFormat>
    <h:panelGroup style="width: 320px; text-align: center;">
        <h:form>
            <a:commandButton value="#{i18n.ok}"
                             onclick="#{rich:component('regPending')}.hide()"
                             styleClass="rich-fileupload-button"/></h:form>
    </h:panelGroup>
</rich:popupPanel>

<rich:popupPanel id="pswdRecovered" width="360" height="260">
    <f:facet name="header">
        <h:panelGroup>
            <h:outputText value="#{i18n.password_recovered}"/>
        </h:panelGroup>
    </f:facet>
    <f:facet name="controls">

            <h:graphicImage value="/resources/img/close.gif" styleClass="hidelink" id="hideRecoveredLink"/>
            <rich:componentControl for="pswdRecovered" attachTo="hideRecoveredLink" operation="hide" event="onclick"/>

    </f:facet>
    <h:outputFormat value="#{i18n.password_recovered_sent}" escape="false">
        <f:param value="#{guest.recoveredPasswordEmail}"/>
    </h:outputFormat>
    <h:panelGroup style="width: 320px; text-align: center;">
        <h:form>
            <a:commandButton value="#{i18n.ok}"
                             onclick="#{rich:component('pswdRecovered')}.hide()"
                             styleClass="rich-fileupload-button"/></h:form>
    </h:panelGroup>
</rich:popupPanel>

<rich:popupPanel id="termsOfUse" width="640" height="480">
    <f:facet name="header">
        <h:panelGroup>
            <h:outputText value="#{i18n.terms_of_use}"/>
        </h:panelGroup>
    </f:facet>
    <f:facet name="controls">

            <h:graphicImage value="/resources/img/close.gif" styleClass="hidelink" id="hideTermsLink"/>
            <rich:componentControl for="termsOfUse" attachTo="hideTermsLink" operation="hide" event="onclick"/>

    </f:facet>
    <!--<a:include viewId="legal.html"/> -->
    <h:panelGroup style="width: 600px; text-align: center;">
        <h:form>
            <a:commandButton value="#{i18n.ok}"
                             onclick="#{rich:component('termsOfUse')}.hide()"
                             styleClass="rich-fileupload-button"/></h:form>
    </h:panelGroup>
</rich:popupPanel>

</ui:composition>